<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a vector tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js'></script>

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGVvcG9sZC0yMDE5IiwiYSI6ImNrM3lpN2p3azFrankzZG56N25kN2Z2ZW4ifQ.ul_9S9KTum814-9jh_I0vA';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-zh-v1',
            //mapbox://styles/leopold-2019/ck40s5fup0hpx1cmkrrxsqhim
            zoom: 12,
            center: [101.78, 36.62]
        });

        map.on('load', function () {
            map.addLayer({
                "id": "terrain-data",
                "type": "line",
                "source": {
                    type: 'vector',
                    tiles: ['http://localhost/VectorTile/tiles.ashx?m=getVectorTile&z={z}&x={x}&y={y}'],
                    minzoom: 1,
                    maxzoom: 20
                },
                "source-layer": "lines",
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color':
                        ['match', ['get', 'fs_name'], 'A', '#DB0B00', 'B', '#FE9003', 'C', '#FCFC82', 'D', '#59EB04', 'E', '#595CCF', '#FFF5EE'],
                    'line-width': 3
                }
            });
        });


    </script>

</body>
</html>
